import { useState } from 'react';
import { Menu, Dropdown, DropDownProps } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';
import './index.less';
import {
    deviceEnum,
    scaleEnum,
    changeDevice,
    changeScale,
} from './modal';

const getDevice = state => state.layoutHead.device;
const getScale = state => state.layoutHead.scale;

export default function LayoutHead() {
    const dispatch = useDispatch();
    const device = useSelector(getDevice);
    const scale = useSelector(getScale);

    const [deviceVisible, setDeviceVisible] = useState(false);
    const [scaleVisible, setScaleVisible] = useState(false);

    const handleDeviceClick = (e) => {
        dispatch(changeDevice(e.key))
        setDeviceVisible(false)
    }

    const handleScaleClick = (e) => {
        dispatch(changeScale(e.key))
        setScaleVisible(false)
    }

    const handleDeviceVisibleChange = (e) => {
        setDeviceVisible(e)
    }

    const handleScaleVisibleChange = (e) => {
        setScaleVisible(e)
    }

    return <div className='layout-head'>
        <div className='select-page'></div>
        <Dropdown
            trigger={['click']}
            overlay={
                (<Menu onClick={handleDeviceClick}>
                    {
                        deviceEnum.map((item, i) => {
                            return <Menu.Item key={i}>{item.name} {item.width} x {item.height}</Menu.Item>
                        })
                    }
                </Menu>)
            }
            onVisibleChange={handleDeviceVisibleChange}
            visible={deviceVisible}
        >
            <div className='select-device'>
                {device.name} <DownOutlined />
            </div>
        </Dropdown>
        <Dropdown
            trigger={['click']}
            overlay={
                (<Menu onClick={handleScaleClick}>
                    {
                        scaleEnum.map((item, i) => {
                            return <Menu.Item key={i}>{item * 100 + '%'}</Menu.Item>
                        })
                    }
                </Menu>)
            }
            onVisibleChange={handleScaleVisibleChange}
            visible={scaleVisible}
        >
            <div className='select-device'>
                {scale * 100 + '%'} <DownOutlined />
            </div>
        </Dropdown>
    </div>
}